<template>
  <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
    <lay-row space="10">
      <lay-form :model="form">
        <lay-col :md="24">
          <lay-col :md="18">
            <lay-col :md="24">
              <lay-col md="8">
                <lay-form-item label="所属部门" prop="deptId" required>
                  <lay-select v-model="form.deptId" style="width:180px;">
                    <lay-select-option :value="0" label="选择部门"></lay-select-option>
                    <lay-select-option v-for="dept in depts" :value="dept.id" :label="dept.title">
                    </lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col md="8">
                <lay-form-item label="职位" prop="postId" required>
                  <lay-select v-model="form.postId" style="width:170px;">
                    <lay-select-option :value="0" label="选择职位"></lay-select-option>
                    <lay-select-option v-for="post in posts" :value="post.id"
                      :label="post.postName + ' - ' + post.postCode">
                    </lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
              <lay-col md="8">
                <lay-form-item label="人员状态" prop="status">
                  <lay-select v-model="form.status" style="width:130px;">
                    <lay-select-option :value="0" label="选择状态"></lay-select-option>
                    <lay-select-option v-for="status in dictMemberStatus" :value="status.key" :label="status.value">
                    </lay-select-option>
                  </lay-select>
                </lay-form-item>
              </lay-col>
            </lay-col>

            <lay-col :md="24">
              <lay-col :md="12">
                <lay-form-item label="姓名" prop="name" required required-error-message="姓名不能空">
                  <lay-col md="24">
                    <lay-input v-model="form.name"></lay-input>
                  </lay-col>
                </lay-form-item>
              </lay-col>
              <lay-col md="12">
                <lay-form-item label="性别" prop="sex">
                  <lay-col md="24">
                    <lay-radio-group v-model="form.sex">
                      <lay-radio :value="1">男</lay-radio>
                      <lay-radio :value="0">女</lay-radio>
                    </lay-radio-group>
                  </lay-col>
                </lay-form-item>
              </lay-col>
            </lay-col>

            <lay-col :md="24">
              <lay-col md="14">
                <lay-form-item label="身份证号码" prop="idNumber" required required-error-message="身份证号码不能空">
                  <lay-col md="24">
                    <lay-input v-model="form.idNumber"></lay-input>
                  </lay-col>
                </lay-form-item>
              </lay-col>
              <lay-col md="10">
                <lay-form-item label="工号" prop="idWork">
                  <lay-col md="20">
                    <lay-input v-model="form.idWork"></lay-input>
                  </lay-col>
                </lay-form-item>
              </lay-col>
            </lay-col>

            <lay-col :md="24">
              <lay-col md="6">
                <lay-form-item label="政治面貌" prop="party">
                  <lay-col md="24">
                    <lay-input v-model="form.party"></lay-input>
                  </lay-col>
                </lay-form-item>
              </lay-col>
              <lay-col md="8">
                <lay-form-item label="民族" prop="ethnic">
                  <lay-col md="24">
                    <lay-input v-model="form.ethnic"></lay-input>
                  </lay-col>
                </lay-form-item>
              </lay-col>
              <lay-col md="8">
                <lay-form-item label="籍贯" prop="origin">
                  <lay-col md="24">
                    <lay-input v-model="form.origin"></lay-input>
                  </lay-col>
                </lay-form-item>
              </lay-col>
            </lay-col>
          </lay-col>
          <lay-col :md="6">
            <UploadMemberPhoto v-model="form.photo"></UploadMemberPhoto>
          </lay-col>
        </lay-col>

        <lay-col :md="24">
          <lay-col md="10">
            <lay-form-item label="出生日期" prop="dateOfBirth">
                <lay-date-picker v-model="form.dateOfBirth" simple type="date"></lay-date-picker>
            </lay-form-item>
          </lay-col>
          <lay-col md="10">
            <lay-form-item label="参工时间" prop="workTime">
                <lay-date-picker v-model="form.workTime" simple type="date"></lay-date-picker>
            </lay-form-item>
          </lay-col>
        </lay-col>

        <lay-col :md="24">
          <lay-col md="14">
            <lay-form-item label="毕业院校" prop="graduateInstitutions">
                <lay-input v-model="form.graduateInstitutions"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col md="10">
            <lay-form-item label="学习专业" prop="specialty">
                <lay-input v-model="form.specialty"></lay-input>
            </lay-form-item>
          </lay-col>
        </lay-col>

        <lay-col :md="24">
          <lay-col md="9">
            <lay-form-item label="负责工作" prop="duties">
                <lay-input v-model="form.duties"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col md="9">
            <lay-form-item label="职级" prop="duty">
                <lay-input v-model="form.duty"></lay-input>
            </lay-form-item>
          </lay-col>
          <lay-col md="6">
            <lay-form-item label="排序" prop="sort">
                <lay-input v-model="form.sort"></lay-input>
            </lay-form-item>
          </lay-col>
        </lay-col>

        <lay-col :md="24">
          <lay-col md="9">
            <lay-form-item label="联系电话" prop="phone">
              <lay-col md="24">
                <lay-input v-model="form.phone"></lay-input>
              </lay-col>
            </lay-form-item>
          </lay-col>
          <lay-col md="15">
            <lay-form-item label="住址" prop="address">
              <lay-col md="24">
                <lay-input v-model="form.address"></lay-input>
              </lay-col>
            </lay-form-item>
          </lay-col>
        </lay-col>
        <lay-col :md="24" class="saveBtn">
          <lay-button @click="submitClick" type="primary" v-permission="PerKey.Member_AddOrEdit"
            prefix-icon="layui-icon-ok">
            {{ addoredittip }}
          </lay-button>
        </lay-col>
      </lay-form>
    </lay-row>
  </lay-container>
</template>
  
<script lang="ts" name="MemberPost" setup>
import { reactive, ref, toRefs } from "vue";
import { layer } from "@layui/layer-vue";
import { postAdd, putEdit, getEdit } from "../../../../api/module/oas/member";
import { PerKey } from "../../../../library/permissionConst"
import { Member } from '../../../../types/member'
import UploadMemberPhoto from '../../../../layouts/Upload/UploadMemberPhoto.vue'
import Util from '../../../../library/Util'

interface Props {
  MemberId: number,
}
const props = withDefaults(defineProps<Props>(), {
  MemberId: 0,
});

const data = reactive({
  form: <Member><unknown>[]
})

const { form } = toRefs(data)

let addoredittip = ref();
const depts = ref({ targetList: [] as any, })
const posts = ref({ targetList: [] as any, })

const dictMemberStatus = ref()
dictMemberStatus.value = Util.dictfilter("Sys_MemberStatus") 

getEdit(props.MemberId).then((res) => {
  if (res.status == 1) {
    depts.value = res.data.depts
    posts.value = res.data.posts
    if (props.MemberId == 0) {
      addoredittip.value = "新增人员";
      form.value = {
        id: 0,
        deptId: 0,
        postId: 0,
        name: "",
        sex: 1,
        idNumber: "",
        idWork: "",
        dateOfBirth: new Date('2022-01-01'),
        origin: "",
        ethnic: "",
        party: "",
        workTime: new Date('2022-01-01'),
        graduateInstitutions: "",
        specialty: "",
        phone: "",
        address: "",
        photo: "",
        duties: "",
        duty: "",
        sort: 1,
        status: 0,
      }
    } else {
      addoredittip.value = "修改人员";
      form.value = res.data.data
    }
  } else {
    layer.msg("获取基本信息失败！", { icon: 2 })
  }
})

const submitClick = function () {
  if (!form.value.name || !form.value.idNumber) {
    layer.msg("姓名和身份证号码不能空")
    return
  }
  if (form.value.deptId < 1 || form.value.postId < 1 || form.value.status <1) {
    layer.msg("未选择部门或职务")
    return
  }
  if (form.value.id == 0) {
    postAdd(form.value).then((res) => {
      done(res)
    });
  } else {
    putEdit(form.value).then((res) => {
      done(res)
    });
  }
};

const emits = defineEmits(['update:dialogIsOk'])
const done = (res: any) => {
  if (res.status == 1) {
    layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
      emits('update:dialogIsOk', 1)
    });
  } else {
    layer.msg(res.msg, { icon: 2 });
    return false;
  }
}
</script>
<style scoped>

</style>